<template>
  <!-- replace -->
  <div id="nav">
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>

    <!-- a 标签里注入子节点 -->
    <router-link to="/about">
      <!-- <button>about</button> -->
      <nav-bar title="首页"></nav-bar>
    </router-link>
  <hr>
    <router-link to="/home" v-slot="props" custom>
    <h2>props.href:{{props.href}}</h2>
    <!-- <h2>props.route:{{props.route}}</h2> -->
    <button @click="props.navigate">props.navigate</button>
    <span :class="{'active':props.isActive}">{{props.isActive}}</span>
    <span :class="{'active':props.isExactActive}">{{props.isExactActive}}</span>
    </router-link>
  </div>
  <hr>
  <router-view />
</template>

<script>
//23 57
/** replace
 *  * <router-link to="/about" replace>About</router-link>
 *  模糊匹配当前路由router-link-active的class
 *  可以通过active-class重定义
 * <router-link to="/about" active-class="why">About</router-link>
 *  * router-link-exact-active  exact-active-class 重定义
 *  精准匹配当前路由
 */
import NavBar from './components/Navbar.vue'
export default {
  components:{
    NavBar
  }
};
</script>


<style lang="scss">
.why {
  color: red;
}
</style>
